<template>
  <div class="home">
    <el-container>
      <el-header height="80px" :style="{ backgroundColor: headerColor }" style="position: fixed;width: 100%;top: 0;z-index: 9;">
        <div style="margin: 0 auto;">
          <el-row :gutter="20">
            <el-col :span="11">
              <a href="/" :style="{color: liColor}"
                 style="display: block;margin-top: 35px;margin-left: 200px;text-align: left;font-weight: bold;font-size: 14px">凹凸租车</a>
            </el-col>
            <el-col :span="9" style="margin-top: 10px;">
              <ul style="list-style: none;margin-top: 10px" >
                <a href="/">
                  <li class="li" :style="{color: liColor}" style="margin-left: 0">首页</li>
                </a>
                <a href="/duanzu">
                  <li class="li" :style="{color: liColor}">短租</li>
                </a>
                <a href="/changzu">
                  <li class="li" :style="{color: liColor}">长租</li>
                </a>
                <a href="javascript:void(0)" @click="order()">
                  <li class="li" :style="{color: liColor}" style="margin-left: 25px">我的订单</li>
                </a>
              </ul>
            </el-col>
            <el-col :span="4" style="margin-left: -100px;color: orange">
              <el-popover v-if="user==null"
                          placement="top-start"
                          title="欢迎来到凹凸租车"
                          width="200"
                          trigger="hover">
                <i style="font-size: 30px;position:relative;top:25px"
                   slot="reference" class="el-icon-user" ></i>
                <el-button type="info" @click="reg()">注册</el-button>
                <el-button type="warning" @click="login()">登录</el-button>
              </el-popover>
              <el-popover v-else
                          placement="top-start"
                          title="欢迎来到凹凸租车"
                          width="80"
                          trigger="hover">
                <i style="font-size: 30px;position:relative;top:25px"
                   slot="reference" class="el-icon-user" ></i>
                <div style="text-align: center">
                  <el-avatar :src="'http://localhost:19283'+user.avatar"></el-avatar><br>
                  <a href="javascript:void(0)" @click="personal()" style="color: #666666">个人中心</a>
                  <a href="javascript:void(0)" @click="logout()" style="color: #666666">退出登录</a><br>
                  <a href="javascript:void(0)" v-if="user.isAdmin==1" @click="admin()" style="color: #666666">后台管理页面</a>
                </div>
              </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer style="background-color: #2f3234;height: 450px;">
        <div style="width: 900px;margin: 0 auto;color:#666;text-align:center;">
          <!--     一         -->
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="6">
                  <div class="cell" style="float: left;">
                    <h6>关于我们</h6>
                    <p>关于凹凸</p>
                    <p>发展历程</p>
                    <p>媒体报道</p>
                    <p>品牌分类</p>
                    <p>租车价格</p>
                    <p>全国租车</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="cell" style="float: left;">
                    <h6>规则条款</h6>
                    <p>平台规则</p>
                    <p>租车流程</p>
                    <p>服务条款</p>
                    <p>车主责任</p>
                    <p>隐私协议</p>
                  </div>
                </el-col>
                <el-col :span="12">

                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div style="float: right;">
                <el-row >
                  <el-col :span="6">
                    <p style="margin: 20px 0 10px 0;font-size: 8px">支付宝小程序</p>
                    <img src="https://cdn.atzuche.com/pc/qr/alipay.png" style="height: 90px;width: 90px;padding: 5px">
                  </el-col>
                  <el-col :span="6">
                    <p style="margin: 20px 0 10px 0;font-size: 8px">支付宝小程序</p>
                    <img src="https://cdn.atzuche.com/pc/qr/alipay.png" style="height: 90px;width: 90px;padding: 5px">
                  </el-col>
                  <el-col :span="6">
                    <p style="margin: 20px 0 10px 0;font-size: 8px">支付宝小程序</p>
                    <img src="https://cdn.atzuche.com/pc/qr/alipay.png" style="height: 90px;width: 90px;padding: 5px">
                  </el-col>
                  <el-col :span="6">
                    <p style="margin: 20px 0 10px 0;font-size: 8px">支付宝小程序</p>
                    <img src="https://cdn.atzuche.com/pc/qr/alipay.png" style="height: 90px;width: 90px;padding: 5px">
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!--     二         -->
          <el-row>
            <el-col :span="3">
              <p style="font-size: 12px;float: left;margin-top: 0">友情链接</p>
            </el-col>
            <el-col :span="21" class="footer_min" style="margin: 0">
              <a href="">凹凸租车</a>
              <a href="">汽车配件</a>
              <a href="">二手货车</a>
              <a href="">汽车团购</a>
              <a href="">汽车人才网</a>
              <a href="">违章查询</a>
              <a href="">汽车质量投诉</a>
              <a href="">21世纪房车网</a>
              <a href="">大自驾</a>
              <a href="">人人评车网</a>
              <a href="">三峡旅游</a>
              <a href="">爱车迷</a>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!--     三         -->
          <el-row>
            <el-col :span="3">
              <p style="font-size: 12px;float: left;margin-top: 0">凹凸租车</p>
            </el-col>
            <el-col :span="21" class="footer_min1" style="font-size: 10px;color: #666">
              <p style="color: white">©2022 上海馨煜信息科技有限公司</p>
              <p>沪ICP备17039182号-2  沪公网安备 31010402000209号  经营增值电信业务许可：合字B2-20210054  标识编号: 20180329133434646</p>
              <p>违法和不良信息举报邮箱：inbound@atzuche.com  举报邮箱：inbound@atzuche.com</p>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!--     四         -->
          <div >
            <el-row>
              <el-col :span="3">
                <p></p>
              </el-col>
              <el-col :span="21" class="footer_min1" style="font-size: 10px;color: #666">
                <p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</p>
                <p>扫黑除恶众志成城，平安上海人人参与.</p>
                <p>全国扫黑除恶举报电话：010—12389，上海市扫黑除恶举报电话：021—52397077，全国扫黑除恶举报网站：www.12389.gov.cn</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: localStorage.user?JSON.parse(localStorage.user).user:null,
      headerColor: this.$route.path=='/index'?'rgba(255,255,255,0)':'white',// 导航栏背景颜色
      liColor: this.$route.path=='/index'?'white':'#666'  //导航字体颜色
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    order(){
      if (this.user == null){
        this.$confirm("您当前未登录，请先登录!", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'})
      } else{
        this.$router.push("/order")
      }
    },
    reg(){
      if (this.$route.path!='/reg'){
      this.$router.push('/reg');}
    },
    login() {
      if(this.$route.path!='/login'){
        this.$router.push('/login');
      }
    },
    personal() {
      this.$router.push('/personal');
    },
    logout() {
      if (confirm("您确认退出登录吗?")) {
        this.axios.post("http://localhost:29081/users/logout")
        .then((response)=>{
          if (response.data.state == 20000){
            this.$message.success("退出登录");
            localStorage.clear();
            location.href = '/';    //返回首页
          }
        });
      }
    },
    admin(){
      this.$router.push("/admin")
    },
    /*触发滚动事件，实现导航条变色*/
    handleScroll() {
      if(this.$route.path=='/index') {
        // 获取滚动条的位置
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 设置导航栏背景颜色
        this.headerColor = scrollTop > 400 ? 'white' : 'rgba(255,255,255,0)';
        this.liColor = scrollTop > 400 ? '#666' : 'white'
      }
    }
  }
}
</script>

<style scoepd>
.li{
  width: 80px;
  float: left;
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  padding: 10px;
}
.li:hover{
  background-color: rgba(66,185,131,0.8);
  border-radius: 10px;
}
.cell>h6{
  font-size: 12px;
  margin: 20px 0 10px 0;
}
.cell>p{
  font-size: 10px;
  margin: 2px 0;
}
.footer_min>a{
  font-size: 10px;
  margin-right: 30px;
  float: left;
  color: #666;
  text-decoration: none;
}
.footer_min1>p{
  font-size: 10px;
  float: left;
  color: #666;
  text-decoration: none;
  margin: 0;
}
</style>
